<template>
  <MainLayout>
    <div class="server-list-container">
      <!-- 搜索和筛选区域 -->
      <div class="search-filter-bar">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              v-model="searchQuery"
              placeholder="搜索服务器名称或IP"
              prefix-icon="<Search />"
              class="search-input"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="statusFilter" placeholder="服务器状态">
              <el-option label="全部" value="all" />
              <el-option label="运行中" value="运行中" />
              <el-option label="已停止" value="已停止" />
              <el-option label="维护中" value="维护中" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="viewMode" placeholder="视图模式">
              <el-option label="网格视图" value="grid" />
              <el-option label="列表视图" value="list" />
            </el-select>
          </el-col>
          <el-col :span="8" class="text-right">
            <el-button type="primary" class="add-server-btn">
              <Plus /> 添加服务器
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 服务器卡片网格 -->
      <div :class="['server-grid', { 'list-mode': viewMode === 'list' }]">
        <el-col
          :span="viewMode === 'grid' ? 6 : 24"
          v-for="server in filteredServers"
          :key="server.id"
          class="server-card-col"
        >
          <ServerCard
            :server="server"
            @status-change="handleStatusChange"
            @settings="handleSettings"
            @more="handleMore"
          />
        </el-col>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredServers.length === 0" class="empty-state">
        <el-empty description="没有找到服务器数据"></el-empty>
      </div>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import MainLayout from '@/components/layout/MainLayout.vue';
import ServerCard from '@/components/server/ServerCard.vue';
import {
  Plus,
  Search,
  Grid,
  List
} from '@element-plus/icons-vue';

// 服务器状态类型定义
interface Server {
  id: number;
  name: string;
  ip: string;
  port: number;
  status: '运行中' | '已停止' | '维护中';
  players: number;
  maxPlayers: number;
  uptime?: string;
}

// 模拟服务器数据
const servers = ref<Server[]>([
  {
    id: 1,
    name: '帕鲁官方服务器 #1',
    ip: '192.168.1.101',
    port: 8211,
    status: '运行中',
    players: 12,
    maxPlayers: 20,
    uptime: '2天8小时'
  },
  {
    id: 2,
    name: '帕鲁官方服务器 #2',
    ip: '192.168.1.102',
    port: 8211,
    status: '运行中',
    players: 8,
    maxPlayers: 20,
    uptime: '1天12小时'
  },
  {
    id: 3,
    name: '测试服务器',
    ip: '192.168.1.103',
    port: 8211,
    status: '已停止',
    players: 0,
    maxPlayers: 10,
    uptime: '0'
  },
  {
    id: 4,
    name: '开发环境服务器',
    ip: '192.168.1.104',
    port: 8211,
    status: '维护中',
    players: 0,
    maxPlayers: 5,
    uptime: '0'
  },
  {
    id: 5,
    name: '玩家自建服务器',
    ip: '192.168.1.105',
    port: 8211,
    status: '运行中',
    players: 5,
    maxPlayers: 15,
    uptime: '5小时30分钟'
  },
  {
    id: 6,
    name: '比赛专用服务器',
    ip: '192.168.1.106',
    port: 8211,
    status: '已停止',
    players: 0,
    maxPlayers: 30,
    uptime: '0'
  }
]);

// 搜索和筛选条件
const searchQuery = ref('');
const statusFilter = ref('all');
const viewMode = ref('grid');

// 筛选服务器数据
const filteredServers = computed(() => {
  return servers.value.filter(server => {
    // 搜索筛选
    const matchesSearch = server.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                          server.ip.includes(searchQuery.value);
    // 状态筛选
    const matchesStatus = statusFilter.value === 'all' || server.status === statusFilter.value;
    return matchesSearch && matchesStatus;
  });
});

// 处理服务器状态变更
const handleStatusChange = (serverId: number) => {
  const server = servers.value.find(s => s.id === serverId);
  if (server) {
    server.status = server.status === '运行中' ? '已停止' : '运行中';
    server.uptime = server.status === '运行中' ? '刚刚启动' : '0';
    server.players = server.status === '已停止' ? 0 : server.players;
  }
};

// 处理服务器设置
const handleSettings = (serverId: number) => {
  // 导航到服务器详情页
  window.location.href = `/server/${serverId}`;
};

// 处理更多操作
const handleMore = (serverId: number) => {
  console.log('更多操作:', serverId);
};
</script>

<style scoped>
.server-list-container {
  width: 100%;
  height: 100%;
}

.search-filter-bar {
  margin-bottom: 20px;
  padding: 10px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.search-input {
  width: 100%;
}

.add-server-btn {
  display: flex;
  align-items: center;
}

.server-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.server-card-col {
  margin-bottom: 20px;
}

.list-mode {
  flex-direction: column;
}

.list-mode .server-card-col {
  width: 100%;
}

.empty-state {
  margin-top: 50px;
  text-align: center;
}
</style>